<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/vue.min.js"></script>
  <script src="js/axios.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
  <el-container>
    <el-header>
      <!--   logo   -->
      <div >
        <el-image style="width: 300px; height: 100px" src="image/YYDS.png"></el-image>
      </div>
    </el-header>
    <el-main style="width: 100%;margin-top: 100px;">
        <div style="height: 500px;padding-left: 10%;padding-right: 10%">
          <div style="display: inline-block;width: 50%;height: 100%;float: left">
            <el-image style="width: 80%; height: 60%" src="image/YYDS.png"></el-image>
          </div>
          <div style="display: inline-block;width: 30%;height: 70%;border: 1px solid #eeeeee">
            <el-menu class="el-menu-demo" mode="horizontal" style="padding-left:25%;margin-bottom: 20px" default-active="1" @select="handleSelect">
              <el-menu-item index="1">短信登录</el-menu-item>
              <el-menu-item index="2">密码登录</el-menu-item>
            </el-menu>
            <el-form label-width="80px" v-show="loginIndex==1" :model="phoneLogin" :rules="phonerules">
              <el-form-item prop="phone">
                <el-input  placeholder="请输入手机号" v-model="phoneLogin.phone" class="input-with-select" @input="show"  >
                  <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="+86" value="1"></el-option>
                    <el-option label="+886" value="2"></el-option>
                    <el-option label="+1" value="3"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input  placeholder="请输入验证码" v-model="phoneLogin.code" @input="login" >
                  <el-button :disabled="isShow" :style="mystyle"  slot="append" @click.prevent="userPhoneLogin" >获取验证码</el-button>
                </el-input>

              </el-form-item>
              <el-form-item >
                <el-button :disabled="isShow||isLogin" type="primary" round style="width: 50%;margin-left: 15%" @click="codeYz">登录</el-button>
              </el-form-item>
            </el-form>
            <el-form label-width="80px" v-show="loginIndex==2" :model="useridLogin" :rules="zhrules">
              <el-form-item  prop="userzh">
                <el-input  placeholder="请输入用户名" v-model="useridLogin.userzh"></el-input>
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input  placeholder="请输入密码" v-model="useridLogin.pwd" @input="pwdlogin"></el-input>
              </el-form-item>
              <el-form-item >
                <el-button :disabled="zhlogin"  type="primary" round style="width: 50%;margin-left: 15%" @click="userzhlogin">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
    </el-main>
  </el-container>
</div>

<script>

  var v =new Vue({
    el:'#app',
    data: {
      img1: 'image/YYDS.png',
      loginIndex: 1,
      useridLogin: {userzh:"", pwd:""},
      phoneLogin: {phone:"",code:""},
      userMsg:{},
      select: "+86",
      isShow:true,
      isLogin:true,
      zhlogin:true,
      phonerules:{
        phone: [
          { min: 11, max: 11, message: '请输入正确手机号', trigger: 'change' }
        ],
      },
      zhrules:{
        pwd:[
           { min:6,max:20,message:'密码最少为6位',trigger: 'change'}
        ]
      },
      // userid: '',
      // pwd: '',
    },
    computed:{
        mystyle(){
          if (this.isShow){
            return {
                backgroundColor:'#F5F7FA',
              color:'#909399'
            }
          }else {
            return {
              backgroundColor: '#409EFF',
              color: '#FFFFFF'
            }
          }
        }
    },
    methods:{
      handleSelect(index){
        this.loginIndex=index;
      },
      show(e){
        this.phoneLogin.phone=e.replace(/[^\d]/g, '').replace(/(\d{11})\d*/,"$1");
        this.isShow = this.phoneLogin.phone.length !== 11;

      },
      login(e){
        this.phoneLogin.code=e.replace(/[^\d]/g, '').replace(/(\d{4})\d*/,"$1");
        this.isLogin = this.phoneLogin.code.length !== 4;
      },
      pwdlogin(e){
        this.zhlogin = this.useridLogin.pwd.length < 6;
      },
      userzhlogin(){
        var params = new URLSearchParams();
        for (let name in this.useridLogin){
          params.append(name,this.useridLogin[name]);
        }
        axios.post("IdLoginServlet.s",params).then(res=>{
          if (res.data.code===1){
            this.$message({
              message:res.data.msg,
              type: 'success'
            });
            setTimeout("javascript:window.location.href=document.referrer",800);
          }else {
            this.$message.error(res.data.msg)
          }
        });
      },
      userPhoneLogin(){
        var params = new URLSearchParams();
        for (let name in this.phoneLogin){
          params.append(name,this.phoneLogin[name]);
        }
        axios.post("UserPhoneLoginServlet.s",params).then(res=>{
            this.userMsg = res.data;
        });
      },
      codeYz() {
        console.log(this.userMsg.data.code)
        if (this.phoneLogin.code===this.userMsg.data.code){

          this.$message({
            message:this.userMsg.data.msg,
            type: 'success'
          });
          setTimeout("javascript:window.location.href=document.referrer",800);
        }else{
          this.$message.error(this.userMsg.msg);
        }
      }
    }
  });
</script>
</body>
<style>
  #app{
    height: 100%;
  }
  .el-input{
    width: 300px;
  }
  .el-select,.el-input--suffix{
    width: 80px;
  }
</style>
</html>